<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Movie Manager</title>
    <%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>
    <%= javascript_include_tag "ext/adapter/prototype/prototype.js" %>
    <%= javascript_include_tag "ext/adapter/prototype/scriptaculous.js" %>
    <%= javascript_include_tag "ext/adapter/prototype/effects.js" %>
    <%= javascript_include_tag "ext/adapter/prototype/ext-prototype-adapter.js" %>
    <%= javascript_include_tag "ext/ext-all-debug.js" %>
    <%= javascript_include_tag "ext/build/locale/ext-lang-zh_CN.js" %>
    <script>
//            Ext.onReady(function(){
//                Ext.MessageBox.alert('警告', '你好，你现在的操作有误，有稍后再试.');
//            });
</script>
  </head>
  <body>
    <div id="grid" style="height:370px;">
    </div>
    <script>
var sm = new Ext.grid.CheckboxSelectionModel();
            
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
        header: '编号',
        dataIndex: 'id',
        sortable: true
    }, {
        header: '性别',
        dataIndex: 'sex',
        renderer: renderSex
    }, {
        header: '名称',
        dataIndex: 'name',
        sortable: true
    }, {
        header: '描述',
        dataIndex: 'descn',
        renderer: renderDescn,
        sortable: true
    }]);
            
function renderSex(value){
    if (value == 'male') {
        return "<span style='color:red;font-weight:bold;'>男</span><img src='/images/male.gif' />";
    }
    else {
        return "<span style='color:green;font-weight:bold;'>女</span><img src='/images/female.gif' />";
    }
}
            
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){
    var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
        "这个单元格的值是：" +
        value +
        "\\n" +
        "这个单元格的配置是：{cellId:" +
        cellmeta.cellId +
        ",id:" +
        cellmeta.id +
        ",css:" +
        cellmeta.css +
        "}\\n" +
        "这个单元格对应行的record是：" +
        record +
        "，一行的数据都在里边\\n" +
        "这是第" +
        rowIndex +
        "行\\n" +
        "这是第" +
        columnIndex +
        "列\\n" +
        "这个表格对应的Ext.data.Store在这里：" +
        store +
        "，随便用吧。" +
        "\")'>";
    return str;
}
            
            
var data = [['1', 'male', 'name1', 'descn1'], ['2', 'female', 'name2', 'descn2'], ['3', 'male', 'name3', 'descn3'], ['4', 'female', 'name4', 'descn4'], ['5', 'male', 'name5', 'descn5'], ['6', 'male', 'name6', 'descn6'], ['7', 'male', 'name7', 'descn7'], ['8', 'male', 'name8', 'descn8'], ['9', 'male', 'name9', 'descn9'], ['10', 'male', 'name10', 'descn10'], ['11', 'male', 'name11', 'descn11'], ['12', 'male', 'name12', 'descn12']];
            
var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [{
            name: 'id'
        }, {
            name: 'sex'
        }, {
            name: 'name'
        }, {
            name: 'descn'
        }])
});
            
var grid = new Ext.grid.GridPanel({
    el: 'grid',
    ds: ds,
    cm: cm,
    bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: "显示第 {0} 条到 {1} 条记录，一共 {2} 条",
        emptyMsg: "没有记录"
    })
});
grid.render();
ds.load();
//            ds.load({
//                params: {
//                    start: 0,
//                    limit: 10
//                }
//            });
</script>
  </body>
</html>
